Ideation
I saw a website before about a game called Azure Promilia, I think it really suits the multiple category index for this final project.
I really like how the user can interact with the virtual journal, which opens up to more puctures and interactions.
I think this adds more realism to the idea of the journal and files instead of having it as just a virtual section.
I also chose to use this website as a reference, because I want to make something similar for a game in the future as well.
Therefore, using a game website would be benefitial in my learning and exploration.
(Index Link)
At first I got an idea of using glassmorphism as the background after watching an Instagram Reel about decorating with vegetatations and paper. It would add more depth to the website. I originally planned to have flowers of different depth, simulated by the different amount of blur. Each move with different speed as the user scrolls.
Production
Instead of using glassmorphism, I ended up using the original map like idea. I added the rotation and transform scroll interaction to make the website more dynamic. As the user scrolls down, the dive would come in from the left or right and rotate accordingly. I started playing around with the ease in transition time for each div. Each div has now it's own transition time which adds more personality to them. Each div has it's own texture backgrounds that I found on the internet. Each exercise/readings/projects buttons could be hovered. Hovering changes the color. All the references are linked below. I have also added a quick blur and unblur animated filter when the page is first viewed. This adds more effects and decoration into the whole viewing experience.
After getting feedback from my friend, she suggested me that I could add clouds into my index page. Turns out it was a great idea.
Final Result
The only downside to this website is viewing it with mobile devices. Currently, it could only be viewed properly on PC browsers. However, resizing the windows on browser on pc would not affect the viewing experince. The content all displays and move nicely with different window sizes.
(Index Link)
Texture and images references used:
https://stock.adobe.com/ca/search?k=leather+texture
https://project_rolin.artstation.com/projects/Y92rw
https://fantasymapassets.com/product/20-seamless-old-paper-and-parchment-textures-ground-pack/